﻿@page "/components/expansionpanels"

<DocsPage>
    <DocsPageHeader Title="Expansion Panels"/>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelSimpleExample" ShowCode="false" Block="true" FullWidth="true">
                <ExpansionPanelSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiple Expanded Panels">
                <Description>Multiple expansion panels can be opened at the same time by setting <CodeInline>MultiExpansion</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelMultiExample" Block="true" FullWidth="true">
                <ExpansionPanelMultiExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Async loading of data">
                <Description>The panels inner collapsible won't expand until IsExpandedChanged has completed, enabling smooth opening of expansion panels even if the data is not loaded when the header is clicked.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelAsyncExample" ShowCode="false" Block="true" FullWidth="true">
                <ExpansionPanelAsyncExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Disabled">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelDisabledExample" Block="true" FullWidth="true">
                <ExpansionPanelDisabledExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Padding">
                <Description>The padding of the panels can be controlled with <CodeInline>DisableGutters</CodeInline> and <CodeInline>Dense</CodeInline>. These can be set individually per panel or applied on all panels by setting them on the parent.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelPaddingExample" Block="true" FullWidth="true">
                <ExpansionPanelPaddingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Borders">
                <Description>The <CodeInline>DisableBorders</CodeInline> property removes all borders around the panel.<br />For a flatter UI design, this might be preferred along with <CodeInline>Elevation</CodeInline> set to 0.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelDisableBorderExample" Block="true" FullWidth="true">
                <ExpansionPanelDisableBorderExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Customizing the Header and Icon">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ExpansionPanelTitleExample" ShowCode="false" Block="true" FullWidth="true">
                <ExpansionPanelTitleExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
